FlyTalk.views.ServicesView = Ext.extend(Ext.Panel, {
	id: 'ServiceView',
	scroll: false,
    indicator: true,
    fullscreen: true,
    layout: 'card', 
	title: 'ServiceView',
	
	


	// tabBar:{
        //dock: 'bottom', // will put the menu on the bottom of the screen
		// xtype: 'segmentedbutton',
		// items: buttonsgroup2,
		// layout:{
			// type: 'hbox',
			// pack: 'center' // this will center the menu
        // },		
    // },


    initComponent: function () {
		var direction = 'left';
		
    	this.backButton = new Ext.Button({
			iconCls: 'home',
			iconMask: true,
			handler: this.backButtonTap,
			scope: this
		});
		
		this.notifButton = new Ext.Button({
			ui: 'back',
			text: 'back',
			iconMask: true,
			handler: this.notifButtonTap,
			hidden: true,
			scope: this
		});
		
		 this.filterButton = new Ext.Button({
				text: 'Filter',
	        	ui: 'action', 
//	        	iconCls: 'add',
				handler: this.filterButtonTap,
				scope: this
			});
    	
		this.toolbar = new Ext.Toolbar({
			title: 'Services',
			doc: 'top',
			layout: 'hbox',
			items: [
			    this.backButton,
				this.notifButton,
				{xtype: 'spacer'},
				this.filterButton
				//this.composeButton,
			]
		});

		// filter menu
		// template for menu button
		var menuButtonTpl = new Ext.XTemplate(
			'<div style="padding:6px"><img src={src} alt="" width="60" height="60" /><p style="font-size:12px">{btnText}</p></div>'
		);
				
		//restaurant filter
		this.filterButton1 = new Ext.Button({
			data:{
				src: "images/filter_rest_on.png",
				btnText: "",
			},
			baseCls: "menuButton",
			pressedCls: "menuButtonPressed",
			tpl:menuButtonTpl,
			title: 'clicked',
			flex:1,
			handler: this.filterButton1Tap,
			scope: this
		});
		
		//shopping
		this.filterButton2 = new Ext.Button({
			data:{
				src: "images/filter_shop_on.png",
				btnText: "",
			},
			baseCls: "menuButton",
			pressedCls: "menuButtonPressed",
			tpl:menuButtonTpl,
			title: 'clicked',
			flex:1,
			handler: this.filterButton1Tap,
			scope: this
		});
		
		// rental car
		this.filterButton3 = new Ext.Button({
			data:{
				src: "images/filter_other_on.png",
				btnText: "",
			},
			baseCls: "menuButton",
			pressedCls: "menuButtonPressed",
			tpl:menuButtonTpl,
			title: 'clicked',
			flex:1,
			handler: this.filterButton1Tap,
			scope: this
		});
		
		// wifi
		this.filterButton4 = new Ext.Button({
			data:{
				src: "images/filter_wifi_on.png",
				btnText: "",
			},
			baseCls: "menuButton",
			pressedCls: "menuButtonPressed",
			tpl:menuButtonTpl,
			title: 'clicked',
			flex:1,
			handler: this.filterButton1Tap,
			scope: this
		});
		
		//outlet
		this.filterButton5 = new Ext.Button({
			data:{
				src: "images/filter_outlet_on.png",
				btnText: "",
			},
			baseCls: "menuButton",
			pressedCls: "menuButtonPressed",
			tpl:menuButtonTpl,
			title: 'clicked',
			flex:1,
			handler: this.filterButton1Tap,
			scope: this
		});
		
		//Loos
		this.filterButton6 = new Ext.Button({
			data:{
				src: "images/filter_sit_on.png",
				btnText: "",
			},
			baseCls: "menuButton",
			pressedCls: "menuButtonPressed",
			tpl:menuButtonTpl,
			title: 'clicked',
			flex:1,
			handler: this.filterButton1Tap,
			scope: this
		});
		
		// atm
		this.filterButton7 = new Ext.Button({
			data:{
				src: "images/filter_atm_on.png",
				btnText: "",
			},
			baseCls: "menuButton",
			pressedCls: "menuButtonPressed",
			tpl:menuButtonTpl,
			title: 'clicked',
			flex:1,
			handler: this.filterButton1Tap,
			scope: this
		});
		
		// user
		this.filterButton8 = new Ext.Button({
			data:{
				src: "images/filter_wc_on.png",
				btnText: "",
			},
			baseCls: "menuButton",
			pressedCls: "menuButtonPressed",
			tpl:menuButtonTpl,
			title: 'clicked',
			flex:1,
			handler: this.filterButton1Tap,
			scope: this
		});
		
		// map
		this.filterButton9 = new Ext.Button({
			data:{
				src: "images/filter_user_on.png",
				btnText: "",
			},
			baseCls: "menuButton",
			pressedCls: "menuButtonPressed",
			tpl:menuButtonTpl,
			title: 'clicked',
			flex:1,
			handler: this.filterButton1Tap,
			scope: this
		});
		
		// top row for overlay menu
		this.firstPanel = new Ext.Panel({
			scroll: false,
            fullscreen: false,
			baseCls: "menu",
			pack: 'start',
			//align: 'stretch',
		//	html: 'top',
			//flex:1,
			layout: 'hbox',
			items: [this.filterButton1, this.filterButton2, this.filterButton3],
		});
		
		// 2nd row for overlay menu
		this.secondPanel = new Ext.Panel({
			scroll: false,
            fullscreen: false,
			baseCls: "menu",
			pack: 'start',
			//align: 'stretch',
			//flex:1,
			//html: 'mid',
			layout: 'hbox',
		    items: [this.filterButton4, this.filterButton5, this.filterButton6],
		});
		

		// 3rd row for overlay menu
		this.thirdPanel = new Ext.Panel({
			scroll: false,
            fullscreen: false,
			baseCls: "menu",
			pack: 'start',
			//align: 'stretch',
			//flex:1,
			//html: 'mid',
			layout: 'hbox',
		    items: [this.filterButton7, this.filterButton8, this.filterButton9],
		});
		
		this.overlayTb = new Ext.Toolbar({
            dock: 'top',
            title: 'Map Filters',
        });
		
		this.overlay = new Ext.Panel({
            floating: true,
            modal: true,
            centered: true,
			layout:'fit',
			//width: 200,
            //height: 180,
		    hideMode:'close',
		    hideOnMaskTap:'false',
		    layout: 'vbox',
		    scroll:'vertical',
			items: [
			        this.firstPanel,
			        this.secondPanel,
			        this.thirdPanel,
			        
			        {
			        	xtype: 'button',
						ui: 'action small',
						style: 'margin: .5em',
			        	text: 'View selected services',		
			        	handler: function(){
			        		FlyTalk.views.ServicesView.overlay.hide();
			        	}
			        }
             ], // end of items
           //  dockedItems: [this.overlayTb],
        });

		buttonsGroup2 = new Ext.SegmentedButton({ 
			xtype: 'segmentedbutton',
			allowDepress: false,
			items: [{
				text: 'All',
				padding: '0 30 0 30',
				//handler: this.backButtonTap,FlyTalk.views.ServicesTabAllView, 
				handler: function () {
					//console.log(FlyTalk.views.TalkView.toolbartab.items.getAt(1).getPressed().text);
					FlyTalk.views.ServicesView.setActiveItem(FlyTalk.views.ServicesTabAllView, {type: 'slide', direction: 'right'});
					direction = 'left';
				},
				pressed: true
			}, {
				text: 'Near Gate',
				//handler: this.backButtonTap
				handler: function () {
					
					if (direction == 'left'){
						FlyTalk.views.ServicesView.setActiveItem(FlyTalk.views.ServicesTabGateView,{type: 'slide', direction: 'left'});
					} else {
						FlyTalk.views.ServicesView.setActiveItem(FlyTalk.views.ServicesTabGateView,{type: 'slide', direction: 'right'});
					}
				},
			}, {
				text: 'Near Me',
				//handler: this.backButtonTap
				handler: function () {
					FlyTalk.views.ServicesView.setActiveItem(FlyTalk.views.ServicesTabNearView, {type: 'slide', direction: 'left'});
					direction = 'right';
				},
			}]
		});
		
		this.toolbartab = new Ext.Toolbar({
			//title: 'Services',
			doc: 'top',
			layout: 'hbox',
			ui: 'toptab',
			items: [
				{xtype: 'spacer'},
			    buttonsGroup2,
				{xtype: 'spacer'},
		
			]
		});
		
		this.dockedItems = [this.toolbar, this.toolbartab ];
		
		Ext.apply(FlyTalk.views, {
				ServicesTabNearView: new FlyTalk.views.ServicesTabNearView(),
				ServicesTabGateView: new FlyTalk.views.ServicesTabGateView(), 
				ServicesTabAllView: new FlyTalk.views.ServicesTabAllView(), 
				
        });
           

		this.items = [
			FlyTalk.views.ServicesTabAllView, 
			FlyTalk.views.ServicesTabGateView, 
			FlyTalk.views.ServicesTabNearView
			
		];
		
		FlyTalk.views.ServicesView.superclass.initComponent.call(this);
        
    },
    
	//home button
    backButtonTap: function () {
        Ext.dispatch({
            controller: FlyTalk.controllers.ftController,
            action: 'openHome'
        });
    },
	
	notifButtonTap: function () {
    	// restore value
		FlyTalk.views.mainView.setActiveItem(FlyTalk.views.NotificationView, {type: 'slide', direction: 'right'});	
		// Ext.dispatch({
			// controller: FlyTalk.controllers.dbController,
			// action: 'getNotification',
		// });
    },
    
    filterButtonTap: function () { // to open the image overlay 
    	this.overlay.setCentered(true);
    	this.overlay.show();
    },
    
    filterButton1Tap: function () { // to open the image overlay 
    	//FlyTalk.views.BoredView.incomplete.show();
    },

});